<template>
    <div ref="lineChart" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import {ref,reactive,onMounted, onUnmounted,getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance();
const echarts = proxy.$echarts;
const lineChart = ref(null); // 容器 DOM 引用
let chartInstance = null;   // ECharts 实例
const props = defineProps({
  data: Array,
});
watch(()=>props.data,()=>{
  if (!chartInstance && lineChart.value) {
    chartInstance = echarts.init(lineChart.value);
    window.addEventListener('resize', handleResize);
  }
  chartInstance?.setOption(options.value);
},{deep:true})
const options = computed(()=>({
        title: {
        //   text: "(%)",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        //   left: 10,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor:'rgba(23,47,73,0.8)',
              borderColor:'#41ACFF',
              textStyle:{
                color: "#FFFFFF"
              }
        },
        /**区域位置*/
        grid: {
          top: "10%",
          left: "5%",
          right: "0%",
          bottom: "20%",
          // containLabel: true
        },
        //X轴
        xAxis: {
          data: props.data?.map(_=> _.month),
          type: "category",
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            color: "#fff",
            fontSize: 16,
            padding: [0, 44, -2, 0],
          },
          show: true,
          // splitNumber: 4,
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)",
            },
          },
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        },
        series: [
          {
            name: "告警次数",
            type: "line",
            color: "#00A3FF",
            smooth: true,
            symbol: 'circle',       // 形状：circle（默认）、rect、triangle等
            symbolSize: 8,          // 拐点大小
            itemStyle: {
              // color: '#5470C6',     // 拐点颜色
              borderColor: '#fff',  // 边框颜色
              borderWidth: 2        // 边框宽度
            },
            areaStyle: {
              color: new proxy.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(0, 167, 255, 0.40)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 130, 255, 0)",
                },
              ]),
            },
            data: props.data?.map(_=> _.count),
          },
        ],
      }))
const handleResize = () => chartInstance.resize();
onMounted(() => {
  nextTick(()=>{
    if (lineChart.value && !chartInstance) {
      chartInstance = echarts.init(lineChart.value);
      chartInstance.setOption(options.value);
      window.addEventListener('resize', handleResize);
    }
  })
});
onUnmounted(() => {
     window.removeEventListener('resize', handleResize);
     chartInstance.dispose();
   });
</script>

<style lang="scss" scoped>

</style>